<!-- 首页 -->
<template >
	<scroll-view  @scrolltolower='sc' scroll-y='true' class="this-page-class">

		<!-- 搜索区域 -->
		<view class="first-row">
			<!-- 地区选择器 -->
			<view class="region-seletor">
				<picker @change="changeRegion" :value="region.index" :range="region.array">
					<view><text>{{region.array[region.index]}}</text></view>
				</picker>
			</view>
			<!-- 搜索框 -->
			<view class="search-input">
				<input @confirm="searchIdle" confirm-type="search" placeholder="搜点什么吧~" />
			</view>

		</view>
		<!-- 轮播图 -->
		<view>
			<swiper circular :indicator-dots="swiperImages.indicatorDots" :autoplay="swiperImages.autoplay"
				:interval="swiperImages.interval" :duration="swiperImages.duration">
				<swiper-item class="swiper-item" v-for="(item,index) in swiperImages.src" :key="index">
					<image class="swiper-images" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分组区域 -->
		<view class="goods-classify">
			<view>
				<yjy-bar :goodsGroup="group.array" @change="handleGoodsGroup"></yjy-bar>
			</view>
		</view>

		<!-- 商品瀑布流 -->
		<view>
			<yjy-wtffl ref="yjyWtffl" ></yjy-wtffl>
		</view>

	</scroll-view>
</template>

<script>

	export default {
		
		data() {
			return {
				// 轮播图
				swiperImages: {
					indicatorDots: false, //轮播图下面的点
					autoplay: true, //自动播放
					interval: 3000, //一张图片播放时长
					duration: 500, //滚动时长
					src: [
						// "/static/test/wql1.jpg",
						// "/static/test/wql1.jpg"
						// ,
						"https://www.jxufe.edu.cn/uploadfile/82/Attachment/7aa2283ad9.png",
						"https://www.jxufe.edu.cn/uploadfile/82/Attachment/3e43915177.png",
						"https://www.jxufe.edu.cn/uploadfile/82/Attachment/60b393929c.png"
					]
				},
				// 地区选择
				region: {
					index: 0,
					array: ['麦庐', '蛟桥', '枫林'],
				},
				//商品分类
				group: {
					index: 0,
					array: ['推荐', '最热', '最新']
				}
			}
		},
		methods: {
			sc(){
				console.log('scrolltolower执行了')
				this.$refs.yjyWtffl.loadMore()
			},
			//分组改变
			handleGoodsGroup: function(e) { //e为分组的下标
				this.group.index = e
				console.log('当前分组下标替换为：')
				console.log(e)
				this.$refs.yjyWtffl.showChanged(this.region.index, e)
			},
			//地区改变
			changeRegion: function(e) { //i为地区下标
				let currentIndex = e.detail.value; //修改后的地区数组下标
				console.log(currentIndex);
				this.region.index = currentIndex;
				this.$refs.yjyWtffl.showChanged(currentIndex, this.group.index);
			},
			//搜索框
			searchIdle: function(e) {
				let searchContent = e.detail.value; //搜索框的内容
				let reg = this.region.index
				console.log(e.detail.value)
				uni.navigateTo({
					url: '/pages/search/search?val=' + searchContent + '&reg=' + reg ,
					success: function() {
						console.log(searchContent);
					}
				})
			},

		},
		onShow: function() {
			console.log('首页 出现')
		},
		onPullDownRefresh() {
			console.log('refresh');

		},

	}
</script>

<style>
	.this-page-class{
		height: 100%;
	}
	
	/* 地区选择器 */
	.region-seletor {
		border-radius: 25rpx;
		margin-left: 10rpx;
		padding: 16rpx;
		border-style: solid;
		border-color: #e8e8e8;
		color: #3f3f3f;
	}

	/* 轮播图 */
	.swiper-item {
		display: block;
		text-align: center;
	}

	.swiper-images {
		height: 300rpx;
		width: 700rpx;
		border-radius: 10rpx;
	}


	/* 第一行样式 */
	.first-row {
		margin: 1rpx auto 15rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	/* 搜索框样式 */
	.search-input {
		/* 根据需要调整宽度 */
		width: 520rpx;
		padding: 19rpx;
		/* 添加内部间距 */
		border: 1rpx solid #ccc;
		/* 添加边框 */
		border-radius: 5rpx;
	}

	/* 分类区域 */
	.goods-classify {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
</style>